<template>
    <div class="NewAddress">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">收货地址</h1>
        </header>

        <form class="mui-input-group ">
            <div class="mui-input-row">
                <label>收货人</label>
                <input type="text" class="mui-input-clear" placeholder="请贴些收货人姓名">
            </div>
            <div class="mui-input-row">
                <label>手机号</label>
                <input type="text" class="mui-input-clear" placeholder="请填写11位手机号码">
            </div>
            <div class="mui-input-row displayone">
                <label>所在地区</label>
                <div style="width:81%"> 
                <span class="r_m10">{{ cheng[0].id==" "?"":cheng[0].input}}</span>
                <span class="r_m10">{{ cheng[1].id==" "?"":cheng[1].input}}</span>
                <span class="r_m10">{{ cheng[2].id==" "?"":cheng[2].input}}</span>
                <span class="Xzcc" @click="sanji1">请选择></span>
                </div>
            </div>
            <div class="mui-input-row">
                <label>详细地址</label>
                <input type="text" class="mui-input-clear" placeholder="请填写详细地址">
            </div>
            <div class="mui-input-row">
                <label>默认</label>
                <mt-switch class="button" v-model="value"></mt-switch>
            </div>
        </form>
        <div class="padding">
            <mt-button size="large" type="danger" @click="purchase">保存 </mt-button>
        </div>
        <sanji @func="show"></sanji>
    </div>
</template>
<script>
import { Switch } from "mint-ui";
import sanji from "../../subcomponents/sanjiliandong.vue";
export default {
    data() {
        return {
            value: "",
            cheng: [ { input: "北京", id: 1 },

            { input: "北京市", id: 2 },

            { input: "东城区", id: 3 }]
        };
    },
    created() {
        
    },
    methods: {
        purchase: function() {
            this.$router.push({ name: "AwardingOrders" });
        },
        sanji1: function() {
            var address = document.querySelector(".showChose");
            address.style.display = "block";
        },
        show(data) {
            if (data.id == 1) {
             
                this.cheng[0] = data;
            }
           else if (data.id == 2) {
        
                this.cheng[1] = data;
            }
           else   if (data.id == 3) {
                this.cheng.splice(2, 1);
                this.cheng[2] = data;
            }
    
            console.log(this.cheng[1].id);

            // console.log('调用了父组件身上的 show 方法: --- ' + data)
            // console.log(data);
        }
    },
    components: {
        sanji
    }
};
</script>
<style lang="scss" scoped>
.NewAddress {
    color: #141414;
    padding-top: 40px;
    .mui-bar {
        background: rgb(153, 9, 9);
        a {
            color: #ffff;
        }
        h1 {
            color: #ffff;
        }
    }
  
    .mui-input-group {
          .displayone{
              display: flex;
              justify-content: flex-start;
              
    }
        .mui-input-row {
          label{
                  width: 21%;
                      padding: 11px 5px;
          }
          input{
                width: 79%;
          }
            .Xzcc {
                margin-top: 6px;
                float: right;
                display:inline-block; 
                margin-right: 0.2rem;
            }
            .r_m10 {
                margin-right: 0.1rem;
                position: relative;
                top: 7px;
             
                    text-overflow :ellipsis;
           
                    overflow:hidden;
                           white-space:nowrap;
            }
            .button {
                float: right;
                width: 25%;
                margin-top: -8px;
            }
            .mui-input-clear[placeholder] {
                font-size: 15px;
            }
        }
    }
    .padding {
        padding: 30px 20px;
        background: #e0e0e0;
    }
}
</style>    
